<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/easyui_insdep_head :: easyui_insdep_head" th:with="title='员工信息修改'">
</head>

<body>
<div style="width: 400px; padding: 60px 90px;">
    <form id="ff" method="post"
          action="/staff/">
        <input type="hidden" name="_method" value="PUT" />
        <div style="margin-bottom: 20px">
            <input
                    class="easyui-textbox theme-textbox-radius validatebox-readonly"
                    readonly="readonly" th:value="${param.staffId == null ? '' : param.staffId[0]}" name="staffId" id="staffId"
                    style="width: 100%" data-options="label:'职工ID:'"/>
        </div>
        <div style="margin-bottom: 20px">
            <input class="easyui-textbox theme-textbox-radius " id="name"
                   name="staffName" th:value="${param.staffName == null ? '' : param.staffName[0]}" style="width: 100%"
                   data-options="required:true, label:'职工姓名:'"/>
        </div>
        <input id="staffPwd" name="staffPwd" type="hidden" disabled="true" />
        <div id="password-panel">
            <div style="margin-bottom: 20px">
                <input
                        class="easyui-passwordbox easyui-validatebox theme-textbox-radius"
                        id="ipassword1" iconWidth="28" style="width: 100%"
                        data-options="label:'密码:'" validType="equalTo['#ipassword2']" invalidMessage="两次输入密码不匹配"/>
            </div>
            <div style="margin-bottom: 20px">
                <input
                        class="easyui-passwordbox easyui-validatebox theme-textbox-radius"
                        id="ipassword2" style="width: 100%" iconWidth="28" data-options="label:'重复密码:'"
                        validType="equalTo['#ipassword1']" invalidMessage="两次输入密码不匹配"/>
            </div>
        </div>
        <div style="padding: 5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton"
               style="width: 160px; float: left" id="changePassword">同时修改密码</a> <a
                href="javascript:void(0)" class="easyui-linkbutton" id="on-submit" onclick="submitForm()"
                style="width: 80px; float: right">提交更改</a>
        </div>
    </form>

</div>
<script type="text/javascript">
    //<![CDATA[
    $(function () {
        $("#password-panel").hide();

        $("#changePassword").click(function() {
            $("#password-panel").slideToggle("slow");
            document.getElementById("staffPwd").disabled = !document.getElementById("staffPwd").disabled;//普通Js写法
            $("#changePassword").linkbutton({text:$("#changePassword").linkbutton("options").text!="同时修改密码" ? "同时修改密码" : "撤销修改密码"});
        });

        $('#ff').form({
            success: function (data) {     // 提交成功后的回调函数。
                data = data == "success" ? "修改成功" : "修改失败";
                $.messager.alert('结果', data, 'info');
            }
        });
    });

    function submitForm() {
        if(!$("#password-panel").is(":hidden")){
//            if ($("#ipassword1").val() != $("#ipassword2").val()) {
//                alert("两次密码不一致");
//                return;
//            }
            $("#staffPwd").val($("#ipassword1").val());
        }

        $("#ff").submit();
    }

    $.extend($.fn.validatebox.defaults.rules, {
        /*必须和某个字段相等*/
        equalTo: {
            validator: function (value, param) {
                return $(param[0]).val() == value;
            }, message: '字段不匹配'
        }
    });
    //]]>
</script>

</body>
</html>